<template>
  <div class="source-list">
    <!-- 查询 -->
    <el-card>
      <el-form ref="queryForm" :model="queryForm" inline label-width="80px">
        <el-form-item label="渠道名" prop="name">
          <el-input v-model="queryForm.name" placeholder="请输入渠道名" clearable />
        </el-form-item>
        <el-form-item label="链接" prop="route">
          <el-input v-model="queryForm.route" placeholder="请输入链接" clearable />
        </el-form-item>
        <el-form-item label="时间" prop="date">
          <el-input v-model="queryForm.date" placeholder="请输入时间" clearable />
        </el-form-item>
        <el-form-item label="场景" prop="scene">
          <el-input v-model="queryForm.scene" placeholder="请输入场景" clearable />
        </el-form-item>
        <el-form-item label="标记" prop="label">
          <el-input v-model="queryForm.label" placeholder="请输入标记" clearable />
        </el-form-item>
        <el-form-item label=" ">
          <el-button type="primary" @click="querySelect">查询</el-button>
          <el-button @click="resetForm('queryForm')">重置</el-button>
          <el-button type="success" @click="setAddSourcePopShow(true)">新增渠道</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 列表 -->
    <el-card>
      <el-table :data="sources">
        <el-table-column prop="name" label="渠道名" min-width="180" />
        <el-table-column prop="route" label="链接" min-width="180" />
        <el-table-column prop="date" label="时间" min-width="180" />
        <el-table-column prop="scene" label="场景" min-width="180" />
        <el-table-column prop="label" label="标记" min-width="180">
          <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.label }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="lookReport(scope.row)">查看</el-button>
            <el-popconfirm title="确定删除该渠道吗？" @onConfirm="deleteSource(scope.$index)">
              <el-button slot="reference" size="mini" type="danger" style="margin-left: 10px;">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增弹窗 -->
    <el-dialog title="新增渠道" :visible.sync="addSourcePopShow">
      <el-form ref="addForm" :model="addForm" label-width="80px" :rules="addRules">
        <el-form-item label="渠道名" prop="name">
          <el-input v-model="addForm.name" placeholder="请输入渠道名" clearable />
        </el-form-item>
        <el-form-item label="链接" prop="route">
          <el-input v-model="addForm.route" placeholder="请输入链接" clearable />
        </el-form-item>
        <el-form-item label="时间" prop="date">
          <el-input v-model="addForm.date" placeholder="请输入时间" clearable />
        </el-form-item>
        <el-form-item label="场景" prop="scene">
          <el-input v-model="addForm.scene" placeholder="请输入场景" clearable />
        </el-form-item>
        <el-form-item label="标记" prop="label">
          <el-input v-model="addForm.label" placeholder="请输入标记" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="setAddSourcePopShow(false)">取消</el-button>
        <el-button type="primary" @click="addSource">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import sources from '@/assets/db/sources.json'

export default {
  name: 'source-list',
  data() {
    return {
      sources: sources,
      queryForm: {
        name: '',
        route: '',
        date: '',
        scene: '',
        label: ''
      },  // 查询表单
      addSourcePopShow: false,  // 新增渠道弹窗
      addForm: {
        name: '',
        route: '',
        date: '',
        scene: '',
        label: ''
      }, // 新增表单
      addRules: {
        name: [{ required: true, message: '请输入渠道名称', trigger: 'blur' }],
        route: [{ required: true, message: '请输入链接', trigger: 'blur' }],
        date: [{ required: true, message: '请输入时间', trigger: 'blur' }],
        scene: [{ required: true, message: '请输入场景', trigger: 'blur' }],
        label: [{ required: true, message: '请输入标记', trigger: 'blur' }]
      },  // 新增表单验证规则
    }
  },
  methods: {
    // 查看报表
    lookReport(row) {
      this.$router.push({ path: `/pages/source/report?id=${row.id}` })
    },
    // 删除渠道
    deleteSource(index) {
      this.sources = this.sources.filter((v, i) => i !== index)
    },
    // 查询来源
    querySelect() {
      const { name } = this.queryForm
      if (!name) {
        this.sources = sources
        return
      }
      this.sources = sources.filter(v => v.name === name)
    },
    // 重置查询条件
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 提交表单
    submitForm(formName, callback) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          callback()
        } else {
          throw new Error('error submit!!')
        }
      });
    },
    setAddSourcePopShow(flag) {
      this.addSourcePopShow = flag
    },
    // 新增渠道
    addSource() {
      const callback = async() => {
        this.sources.push(this.addForm)
        this.setAddSourcePopShow(false)
      }
      this.submitForm('addForm', callback)
    }
  }
}
</script>